<template>
	<view class="chongzhirecord">
		<headertop title="余额明细" str1="oridei" :back1="back1"></headertop>
		<view class="chongzhiback"> </view>
		<view class="itemboxss">
			<view class="line" v-for="(item,index) in list" :key="index">
				<view class="itembox">
					<view class="texts">
						<view class="t1">
							{{item.memo}}
						</view>
						<view class="t2">
							{{item.createtime}}
						</view>
					</view>
					<view :class="boolind(item.amount)?'numadd':'numadd1'">
						{{boolind(item.amount)?'+':''}}{{item.amount}}
						<view class="cc">
							余额：{{item.after}}
						</view>
					</view>
				</view>
			</view>
			<view class="msgicon" v-if="!list.length">
				<image src="https://chunchi.oss-cn-beijing.aliyuncs.com/static/Frame@2x(21).png" mode="widthFix">
				</image>
				<view class="msgtext">
					暂无余额明细
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import headertop from '@/components/header.vue'
	import {
		ref,
		reactive
	} from 'vue'
	import {
		yemxinit,
		userinfo
	} from '@/api/my.js'
	const back1 = ref('')
	const lastpage = ref(0)
	const userobj = ref({})
	const list = ref([])
	const query = reactive({
		page: 1,
		limit: 10
	})
	import {
		onPageScroll,
		onLoad,
		onReachBottom

	} from "@dcloudio/uni-app";
	onPageScroll((e) => {
		if (e.scrollTop > 100) {
			back1.value = '#FBE7D2'
		} else {
			back1.value = ''
		}
	})
	onReachBottom((e) => {
		if (lastpage.value > query.page) {
			query.page++
			initlist()
		}
	})
	onLoad(() => {
		initlist()
		getuser()
	})
	onReachBottom(() => {
		if (lastpage.value > query.page) {
			query.page++
			initlist()
		}
	})

	function boolind(str) {
		if (str.indexOf('-') != -1) {
			return false
		} else {
			return true
		}
	}

	async function getuser() {
		const res = await userinfo()
		if (res.code == 1) {
			userobj.value = res.data
		}
	}

	function timestampfun(time) {
		const date = new Date(time);
		const year = date.getFullYear();
		const month = String(date.getMonth() + 1).padStart(2, "0");
		const day = String(date.getDate()).padStart(2, "0");
		const hours = String(date.getHours()).padStart(2, "0");
		const minutes = String(date.getMinutes()).padStart(2, "0");
		const seconds = String(date.getSeconds()).padStart(2, "0");
		const formattedDate = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
		return formattedDate
	}
	async function initlist() {
		const res = await yemxinit(query)
		if (res.code == 1) {
			lastpage.value = res.data.list.last_page
			list.value.push(...res.data.list.data)
		}
	}
</script>

<style lang="scss">
	.cc {
		font-weight: 400;
		font-size: 24rpx;
		color: #86909C;
	}

	.msgicon {
		width: 608rpx;
		margin: 100rpx auto;
		overflow: hidden;

		.msgtext {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #86909C;
			text-align: center;
			width: 100%;
			margin-top: -30rpx;
		}

		image {
			width: 608rpx;
		}
	}

	page {
		background: #F7F8FA;
	}

	.chongzhirecord {
		width: 100%;
		overflow: hidden;
		position: relative;

		.chongzhiback {
			width: 750rpx;
			height: 314rpx;
			background: linear-gradient(180deg, #FCE6CD 0%, rgba(252, 230, 205, 0) 100%);
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			position: absolute;
			z-index: -1;
		}

		.itemboxss {
			width: 686rpx;
			margin: auto;
			overflow: hidden;
			margin-top: 196rpx;

			.line {
				width: 686rpx;
				overflow: hidden;
				background: #FFFFFF;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				margin-bottom: 24rpx;

				.itembox {
					width: 622rpx;
					height: 142rpx;
					border-radius: 16rpx 16rpx 16rpx 16rpx;
					margin: auto;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.texts {
						width: 252rpx;
						overflow: hidden;

						.t1 {
							font-weight: 400;
							font-size: 28rpx;
							color: #1D2129;
						}

						.t2 {
							font-weight: 400;
							font-size: 24rpx;
							color: #86909C;
							margin-top: 22rpx;
						}
					}

					.numadd1 {
						font-family: PingFang SC, PingFang SC;
						font-weight: bold;
						font-size: 36rpx;
						color: #4E5969;
					}

					.numadd {
						font-family: PingFang SC, PingFang SC;
						font-weight: bold;
						font-size: 36rpx;
						color: #D5151A;
					}
				}
			}

		}
	}
</style>